import { TLinks } from '@/Type/type'
import Bread from '@/component/bread/bread'
import { Button, Input, Space, Table, message, Modal, Image } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useEffect, useState, useRef } from 'react'
import axios from '@/http'
import { bound } from '@/util'
import { SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import './links.scss'
import LinkModal from './linkModal/linkModal'
const { confirm } = Modal

const Links = () => {
  const bread = ['友链', '友链管理']
  const columns: ColumnsType<TLinks> = [
    { title: 'Id', dataIndex: 'id', key: 'id' },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: '25%'
    },
    {
      title: '网址',
      dataIndex: 'url',
      key: 'url',
      render: (_, data) => {
        return (
          <a href={data.url} target="__blank">
            {data.url}
          </a>
        )
      }
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: '描述',
      dataIndex: 'img',
      key: 'img',
      render: (_, data) => {
        return <Image src={data.img} alt="" />
      }
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      width: '10%',
      render: (_, data) => {
        const { id } = data
        return (
          <Space size="middle">
            <a onClick={() => showDeleteConfirm(id)} style={{ color: 'red' }}>
              删除
            </a>
          </Space>
        )
      }
    }
  ]
  const [linksList, setLinksList] = useState<TLinks[]>([])
  const [title, setTitle] = useState<string>('')
  const linkModalRef = useRef<{ setIsModalVisible: (arg0: boolean) => void }>(null)
  const showDeleteConfirm = (id: string) => {
    confirm({
      title: '删除友链?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除此友链？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        axios
          .post('/link/del', {
            id
          })
          .then((res) => {
            if (res.data.error === -1) {
              message.success('删除成功')
              getLinksList()
            } else {
              message.error('删除失败')
            }
          })
      }
    })
  }
  const getLinksList = (title?: string) => {
    axios
      .get('/link/search', {
        params: {
          title
        }
      })
      .then((res) => {
        res.data.error === -1 && setLinksList(res.data.data)
      })
  }

  const changeValue: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setTitle(e.target.value)
    bound(() => getLinksList(e.target.value), 400)
  }

  const addLinks = () => {
    linkModalRef.current?.setIsModalVisible(true)
  }
  useEffect(() => {
    getLinksList()
  }, [])
  return (
    <div className="links">
      <Bread bread={bread}></Bread>
      <div className="links-options">
        <Button type="primary" onClick={addLinks}>
          新增友链
        </Button>
        <Input
          style={{ width: '200px' }}
          value={title}
          suffix={<SearchOutlined style={{ color: 'rgba(0,0,0,.45)' }} />}
          onChange={changeValue}></Input>
      </div>
      <Table rowKey={(record) => record.id} columns={columns} scroll={{ y: 450 }} dataSource={linksList} />
      <LinkModal ref={linkModalRef} getLinkList={getLinksList}></LinkModal>
    </div>
  )
}
export default Links
